@model PocketPals.Models.Transaction

@{
    ViewData["Title"] = "添加交易记录";
}

<div class="container mt-4">
    <div class="row justify-content-center">
        @* Center the column *@
        <div class="col-md-8 col-lg-6">
            @* Adjust column width for different screen sizes *@
            <div class="card shadow-sm">
                @* Add shadow *@
                <div class="card-body p-4">
                    @* Increase padding *@
                    <form asp-action="Create">
                        <div asp-validation-summary="ModelOnly" class="text-danger mb-3"></div>

                        <div class="mb-3">
                            @* Use mb-3 consistently *@
                            <label asp-for="Type" class="form-label"><i class="fas fa-exchange-alt me-1"></i>交易类型</label> @* Use form-label and add icon *@
                            <select asp-for="Type" class="form-select">
                                <option value="">-- 请选择交易类型 --</option>
                                <option value="Income">收入</option>
                                <option value="Expense">支出</option>
                            </select>
                            <span asp-validation-for="Type" class="text-danger d-block mt-1"></span> @* Ensure validation message is block and has margin *@
                        </div>

                        <div class="mb-3">
                            <label asp-for="Amount" class="form-label"><i class="fas fa-dollar-sign me-1"></i>金额</label> @* Use form-label and add icon *@
                            <input asp-for="Amount" class="form-control" placeholder="请输入金额" /> @* Add placeholder *@
                            <span asp-validation-for="Amount" class="text-danger d-block mt-1"></span>
                        </div>

                        <div class="mb-3">
                            <label asp-for="Description" class="form-label"><i class="far fa-comment-dots me-1"></i>描述</label> @* Use form-label and add icon *@
                            <textarea asp-for="Description" class="form-control" rows="3" placeholder="请输入交易描述（可选）"></textarea> @* Add placeholder *@
                            <span asp-validation-for="Description" class="text-danger d-block mt-1"></span>
                        </div>

                        <div class="mb-4">
                            @* Increase bottom margin before buttons *@
                            <label asp-for="Operator" class="form-label"><i class="fas fa-user-edit me-1"></i>操作人</label> @* Use form-label and add icon *@
                            <select asp-for="Operator" class="form-select">
                                <option value="">-- 请选择操作人 --</option>
                                <option value="爸爸">爸爸</option>
                                <option value="妈妈">妈妈</option>
                                <option value="爷爷">爷爷</option>
                                <option value="奶奶">奶奶</option>
                                <option value="外公">外公</option>
                                <option value="外婆">外婆</option>
                                <option value="舅舅">舅舅</option>
                                <option value="姑姑">姑姑</option>
                            </select>
                            <span asp-validation-for="Operator" class="text-danger d-block mt-1"></span>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            @* Use flex for button alignment *@
                            <a asp-action="Index" class="btn btn-secondary me-md-2"><i class="fas fa-arrow-left me-1"></i>返回列表</a>
                            <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

@* Optional: Add some custom styles if needed *@
<style>
    .form-label {
        font-weight: 500; /* Slightly bolder labels */
    }
    .text-danger {
        font-size: 0.875em; /* Smaller validation text */
    }
</style>